<template>
  <div class="app-container">
    <div class="block">文章标题</div>
    <div style="margin-bottom: 15px">
      <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
    </div>

    <div class="block">文章编辑</div>
    <Editor ref="editor" height="600px" />

    <div class="block">文章描述</div>
    <el-input :rows="5" type="textarea" v-model="form.description"></el-input>

    <Upload
      uploadTitle="文章封面"
      :src="form.thumb"
      @upload-success="handleUploadSuccess"
    />

    <div class="block">选择分类</div>
    <el-select
      v-model="form.select"
      placeholder="请选择分类"
      @change="handleChangeSelect"
    >
      <el-option
        v-for="item in blogTypes"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>

    <el-button
      type="primary"
      style="margin-top: 30px; display: block"
      @click="handleEditActicle"
      >{{ this.mode === "add" ? "添加文章" : "确认修改" }}</el-button
    >
  </div>
</template>

<script>
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/vue-editor";
import Upload from "@/components/Upload";
import { getBlogType } from "@/api/blogType.js";
import { addBlog, editBlog, findOneBlog } from "@/api/blog.js";

export default {
  props: {
    mode: {
      type: String,
      default: "add"
    }
  },
  data() {
    return {
      form: {
        id: "",
        title: "",
        description: "",
        thumb: "",
        select: "",
        imgUrl: "",
      },
      blogTypes: [],
    };
  },
  components: {
    Editor,
    Upload,
  },
  created() {
    getBlogType().then((resp) => {
      this.blogTypes = resp.data;
    });
    if (this.mode === "edit") {
      var blogId = this.$route.params.id;
      findOneBlog(blogId).then((resp) => {
        this.form = resp.data;
        this.form.select = resp.data.category.id ? resp.data.category.id : "";
        this.$refs.editor.invoke("setHTML", resp.data.htmlContent);
      });
    }
  },
  methods: {
    handleEditActicle() {
      const html = this.$refs.editor.invoke("getHTML");
      const markdown = this.$refs.editor.invoke("getMarkdown");
      const obj = {
        title: this.form.title,
        description: this.form.description,
        createDate: Date.now(),
        categoryId: this.form.select,
        toc: [], // 目录由服务器生成
        htmlContent: html,
        thumb: this.form.thumb,
        markdownContent: markdown,
      };
      if (obj.title && obj.description && obj.htmlContent && obj.categoryId) {
        if (this.mode === "add") {
          addBlog(obj).then(() => {
            this.$router.push("/blog");
            this.$message.success("添加成功！");
          });
        } else if (this.mode === "edit") {
          editBlog({
            id: this.form.id,
            data: obj,
          }).then(() => {
            this.$router.push("/blog");
            this.$message.success("修改成功！");
          });
        }
      } else {
        this.$message.warning("请填写所有内容");
      }
    },
    handleUploadSuccess(thumbUrl) {
      this.form.thumb = thumbUrl;
    },
    handleChangeSelect() {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="scss">
.block {
  margin: 15px 0;
}
</style>
